@import "~src/web/variables";

// $box-shadow-color: rgba(255, 255, 255, 0.05);

:host {
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: $app-color-bg-dark-1;

    // invisible/stub button gets focused so real buttons don't flick on window activation (tray icon "toggle" click)
    & > .btn-stub {
        position: fixed;
        left: -1000px;
        top: -1000px;
        width: 0;
        height: 0;
        padding: 0;
        margin: 0;
        font-size: 0;
        border: 0;
    }

    #optionsMenuItem {
        @include app-dropdown-toggle-x-padding-split;
    }

    .wrapper {
        width: 100%;
        height: 100%;
        display: flex;
        flex-flow: column;
    }

    .no-accounts-block {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;

        .btn {
            white-space: normal;
        }
    }

    .controls {
        display: block;
        margin-right: $app-spacer-2;

        .btn-group {
            width: 100%;

            > .btn {
                &:first-child {
                    width: 100%;
                    white-space: nowrap;
                    border-right-color: $app-color-secondary-btn-split-border;
                }

                &:not(:first-child) {
                    margin-left: 0;
                }
            }
        }

        .dropdown-menu {
            min-width: 100%;
        }
    }

    &::ng-deep #{$app-prefix}-account-title {
        margin-bottom: $app-spacer-2 * 1.1;
    }

    .accounts-block {
        display: flex;
        flex-flow: row;
        z-index: 100;

        .list-group.accounts-list {
            flex-direction: row;
            flex-wrap: wrap;
        }

        .btn-group.accounts-list {
            width: 100%;

            &::ng-deep #{$app-prefix}-account-title {
                width: 100%;
            }

            .unread-summary {
                $padding-x-addition: $app-spacer-1 * 0.75;
                @include button-size($input-btn-padding-y, $input-btn-padding-x, $font-size-base, $input-btn-line-height, $btn-border-radius);
                padding-left: $padding-x-addition;
                padding-right: ($app-spacer-2 + $padding-x-addition);

                #{$app-prefix}-unread-badge {
                    font-size: 100%;
                }
            }

            & > .dropdown-toggle {
                width: 100%;
                border-top-left-radius: $btn-border-radius;
                border-bottom-left-radius: $btn-border-radius;
            }

            .dropdown-menu {
                margin-top: $app-spacer-2;
                min-width: 100%;

                .dropdown-item {
                    padding: ($list-group-item-padding-y * 0.8) $list-group-item-padding-x;
                }
            }
        }
    }

    .account-block {
        position: relative;
        flex: 1;
    }

    .layout-mode-top {
        &::ng-deep {
            #{$app-prefix}-account-title {
                &:not(:last-child) {
                    margin-right: $app-spacer-2;
                }
            }
        }
    }

    @media (min-width: #{map-get($grid-breakpoints, lg)}) {
        [class*="layout-mode-left"] {
            flex-flow: row;

            > .btn-group {
                display: none;
            }

            .controls {
                margin-right: 0;
                margin-bottom: $app-spacer-2 * 1.2;
            }

            .accounts-block {
                position: relative;
                flex-flow: column;
                flex-grow: 0;
                overflow-y: auto;

                .list-group.accounts-list {
                    flex-direction: column;
                }
            }

            .account-block {
                flex-grow: 100;
            }

            .list-group.accounts-list {
                flex-direction: row;
                flex-wrap: wrap;
            }
        }

        .layout-mode-left-thin {
            .controls,
            &::ng-deep #{$app-prefix}-account-title {
                .btn-group {
                    flex-direction: column;

                    &:not(.selected) {
                        > .btn-sm {
                            &:not(:last-child) {
                                border-bottom-color: $app-color-secondary-btn-split-border;
                            }
                        }
                    }

                    > .btn-sm {
                        flex-direction: column;
                        align-items: center;
                        padding-left: ($btn-padding-x-sm * 0.4);
                        padding-right: ($btn-padding-x-sm * 0.4);

                        &:not(:last-child) {
                            border-radius: $btn-border-radius-sm $btn-border-radius-sm 0 0;
                        }

                        &:not(:first-child) {
                            border-radius: 0 0 $btn-border-radius-sm $btn-border-radius-sm;
                        }
                    }
                }
            }

            &::ng-deep {
                #{$app-prefix}-account-title {
                    $margin-v: ($app-spacer-1 / 1.5);

                    #{$app-prefix}-unread-badge {
                        margin-bottom: $margin-v;
                        padding: 0.3rem 0.1rem;
                    }

                    .fa {
                        margin: 0 !important;
                        padding: 0.3rem 0 0.2rem;

                        &.fa-lock,
                        &.fa-unlock {
                            padding-top: 0;
                            padding-bottom: 0.1rem;
                        }

                        &.fa-unlock {
                            padding-left: 0.15rem;
                        }
                    }

                    .letters {
                        writing-mode: tb-rl;
                        transform: rotate(180deg);
                        margin: $margin-v 0;
                        line-height: 1;

                        &.login {
                            margin-left: -0.05rem;
                        }
                    }

                    .btn-group {
                        .login-delay {
                            flex-direction: column;
                        }

                        > * {
                            &,
                            > * {
                                margin-right: 0 !important;
                            }
                        }
                    }
                }
            }
        }
    }
}
